<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">
        <div>{{msg}}</div>
        <!-- <div v-once> v-once : {{msg}}</div> -->
        <!-- v-model 只能用在表单元素：input,单选，多选，下拉，文本， -->
        <input type="text" v-model="msg" />

        <!-- 单选   name-->
        <br>
        <span>{{sex}}</span>
        <br>
        <label v-for="item in person">
            <!-- v-bind：绑定状态, 使用太过频繁 : -->
            <input :type="item.type" :name="item.name" v-model="sex" :value="item.value" />{{item.label}}
        </label>
        <!-- <input type="radio" name="sex" v-model="sex" value="女"/>女
        <input type="radio" name="sex" v-model="sex" value="未知"/>未知 -->


        <!-- 多选   name-->
        <br>
        <span>{{fruits}}</span>
        <br>
        <input type="checkbox" v-model="fruits" value="banana" />banana
        <input type="checkbox" v-model="fruits" value="apple" />apple
        <input type="checkbox" v-model="fruits" value="orange" />orange


        <!-- 下拉框   name-->
        <br>
        <span>{{lang}}</span>
        <br>
        <select name="" id="" v-model="lang">
            <option value="">--请选择--</option>
            <option value="Java">Java</option>
            <option value="C#">C#</option>
            <option value="Python">Python</option>
        </select>

        <!-- 文本框 -->
        <br>
        <span>{{text}}</span>
        <br>
        <textarea v-model="text"></textarea>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>

        var app = Vue.createApp({

            data: function () {
                return {
                    sex:'male',
                    person: [
                        {
                            type: 'radio',
                            name: 'sex',
                            value: 'male',
                            label: '男'
                        },
                        {
                            type: 'radio',
                            name: 'sex',
                            value: 'female',
                            label: '女'
                        },
                        {
                            type: 'radio',
                            name: 'sex',
                            value: 'unknown',
                            label: '未知'
                        }
                    ]
                }
            },

        }).mount('#div');

    </script>
</body>

</html>